<script setup>
import { disposeOrderFeedback } from '@/apis/order.js'
import { useRouter, useRoute } from 'vue-router/composables'
import { Toast } from 'vant'
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import UploadTrigger from '@/components/FilePreviewer/UploadTrigger.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
const router = useRouter()
const route = useRoute()
const queryObject = ref(route.query)

const model = reactive({
  opinion: '',
  attachmentInfo: []
})
const disabled = ref(true)
const onSubmit = async () => {
  if (!model.opinion) {
    Toast.fail('请输入反馈内容！')
    return
  }
  try {
    const params = {
      orderNo: queryObject.value.orderNo,
      opinion: model.opinion,
      attachmentInfo: model.attachmentInfo?.map((item) => ({
        url: item.url,
        originalName: item.originalName
      }))
    }

    const res = await disposeOrderFeedback(params)
    if (res.ret === 0) {
      Toast.success('回复成功！')
      router.back()
    } else {
      Toast.fail(res.msg)
      setTimeout(() => {
        router.push('/supervise/detail?orderNo=' + queryObject.value.orderNo)
      }, 3000)
    }
  } catch (error) {
    Toast.fail('网络错误，请稍后再试~')
  }
}

watch(
  () => model.opinion,
  (e) => {
    if (e) {
      disabled.value = false
    } else {
      disabled.value = true
    }
  }
)
</script>

<template>
  <div class="box-border h-full overflow-x-hidden overflow-y-auto bg-#F5F7FA">
    <div class="hf bg-#ffffff">
      <div class="hf-list m-b-14px bg-#F0F4FE">
        <van-field
          name="memo"
          v-model="model.opinion"
          rows="5"
          required
          autosize
          label="督办回复"
          type="textarea"
          maxlength="500"
          placeholder="请输入"
          show-word-limit
          input-align="left"
        />
      </div>
      <div class="px-16px mt-8px bg-white">
        <DetailItem label="附件" top>
          <FileList
            removable
            :upload="true"
            :preview="true"
            :files.sync="model.attachmentInfo"
            :imageMax="9"
            :otherMax="0"
          >
            <template #empty="{ handleUpload }">
              <div class="h-80px w-80px" @click="handleUpload">
                <UploadTrigger icon-size="7vw" />
              </div>
            </template>
          </FileList>
        </DetailItem>
      </div>
    </div>
    <div class="van-cell justify-between items-center" style="background: none">
      <van-button
        type="primary"
        :disabled="disabled"
        class="btn"
        size="normal"
        block
        @click="onSubmit"
        >确定</van-button
      >
    </div>
  </div>
</template>

<style scoped lang="less">
.van-cell--required {
  &::before {
    content: '';
  }
  &:deep(.van-cell__title) {
    font-family: 'PingFangSC-Regular';
    font-weight: 400;
    font-size: 16px;
    color: #54565c;
    height: 34px;
    span::after {
      position: relative;
      right: -2px;
      top: 5px;
      color: #ee0a24;
      content: '*';
    }
  }
}
.btn {
  justify-content: center;
  font-family: 'PingFangSC-Medium';
  font-weight: 500;
  text-align: center;
  font-size: 16px;
}
.hf {
  .hf-list {
    display: flex;
    flex-direction: column;

    font-weight: 400;
    font-size: 16px;
    color: #1e2226;
    letter-spacing: 0;
    line-height: 20px;
    background: #ffffff;
    border-radius: 4px;

    &:deep(.van-cell) {
      flex-direction: column;
      margin: 10px 0 0;
      // height:210px;
      .van-field__label {
        width: 100%;
      }

      .van-field__value {
        padding: 10px;
        height: 210px;
        background: #f8f9fb;
      }
      &::after {
        border-bottom: 0px solid #ebedf0;
      }
    }
  }
}

.field-container {
  display: flex;
  flex-direction: column;
  &:deep(.van-cell) {
    flex-direction: column;
    margin-top: 10px;
    .van-field__label {
      width: 100%;
      height: 35px;
    }
    .van-field__value {
      padding: 0 !important;
      background: #f8f9fb;
    }
  }
  &.uploaders {
    :deep(.van-field__value) {
      padding: 5px;
      background: none !important;
    }
  }
}
</style>
